<script setup>
import { onMounted, nextTick, ref, reactive, watch, onUnmounted } from 'vue'
import { Fold, Expand } from '@element-plus/icons-vue'
import {
  Menu as IconMenu,
  Promotion,
  WarnTriangleFilled,
  Management,
  List,
  HelpFilled,
  WarningFilled,
  Checked,
  Upload,
  UploadFilled,
  Avatar,
  UserFilled,
  Tools,
  Stamp
} from '@element-plus/icons-vue'
import mitt from '../assets/js/mitt'


onMounted(() => {

})
onUnmounted(() => {
})



const defaultOpens = ref(['1', '2']),
  isCollapse = ref(false),
  currentMenu = ref('常规预报'),
  menuMap = {
    'routineFore': '常规预报',
    'weekFore': '一周预报',
  },
  paneList = ref(['预报单列表', '预报单元汇总', '预报单']),
  paneActive = ref('预报单'),
  paneActiveSty = ref({
    color: 'var(--el-color-primary)',// color: '#409eff',
    borderBottom: '2px solid var(--el-color-primary)',
  })

</script>

<template>
  <div class="SystemView">
    <!-- 左侧菜单 -->
    <div class="menu">
      <el-menu router background-color="#f5f7fa" :default-openeds="['1', '2']" :collapse="isCollapse"
        default-active="user">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Avatar />
            </el-icon>
            <span>人员管理</span>
          </template>
          <el-menu-item index="user">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="role">
            <el-icon>
              <HelpFilled />
            </el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="right">
            <el-icon>
              <Stamp />
            </el-icon>
            <span>权限管理</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- <el-menu-item index="setting">
          <el-icon>
            <Tools />
          </el-icon>
          <span>系统设置</span>
        </el-menu-item> -->
        <el-menu-item index="log">
          <el-icon>
            <List />
          </el-icon>
          <span>日志管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content" :style="{ width: isCollapse ? 'calc(100% - 60px)' : 'calc(100% - 220px)' }">
      <router-view v-slot="{ Component }">
          <Transition name="fade" mode="out-in">
            <component :is="Component" />
          </Transition>
      </router-view>
      <!-- <router-view v-slot="{ Component }">
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
      </router-view> -->
    </div>
  </div>
</template>

<style lang='less' scoped>
.SystemView {
  width: 100%;
  display: flex;
  height: calc(100vh - var(--nv-height));
  color: var(--el-color-text-primary);
  overflow: hidden;
  // 背景颜色是常用的那种灰色

  .menu {
    height: 100%;
    border-right: 1px solid var(--el-color-border-Base);

    .el-menu {
      height: 100%;
    }
  }

  .content {
    height: 100%;
    background-color: var(--el-color-Background-Page);
    transition: width 0.3s ease-in-out;

    #content_header {
      width: 100%;
      height: 50px;
      padding: 0 15px;
      border-bottom: 1px solid var(--el-color-Background-Base);
      display: flex;
      display: none;
      align-items: center;
      user-select: none;

      .el-icon {
        cursor: pointer;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .pane {
        margin-left: 20px;
        height: 100%;
        display: flex;
        align-items: center;

        .pane_content {
          height: 90%;
          margin-left: 20px;
          cursor: pointer;
          font-weight: 500;
          font-family: PingFangSC-Regular, Microsoft YaHei, sans-serif;
          font-size: 16px;
          transition: color 0.3s ease;
          display: flex;
          align-items: center;
          border-bottom: 2px solid transparent;
          transform: translateY(2px);
        }
      }
    }

    .content_main {
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: var(--el-color-Background-Page);
    }
  }
}
</style>